<template>
  <div class="flex h-screen p-5 overflow-hidden bg-center bg-cover alls">



    <!-- 左 -->
    <div class="flex flex-col  mr-5 borRiu" style="width: 20%;">
      <div class="h-2/3 borRiu">
        <!-- <iframe class="borRiu none" scrolling="no"
          src="https://wx.inuoyun.com/PlayerEmbed/PlayerEmbed.html?type=1&appid=980466787" frameborder="0"></iframe> -->

          <iframe :src="url" class="borRiu none" scrolling="no"  allowFullScreen></iframe>

      </div>
      <div class="h-1/3 borRiu" style="background-color: #091432;margin-top: 25px;">
        <LeftBot></LeftBot>
      </div>
    </div>


    <!-- 中 -->
    <div class="flex flex-col mr-5" style="flex: 1;">
      <!-- 数据总览 -->
      <TotalData class="center-t borRiu mar-t" :info="headers"></TotalData>
      <div class="flex center-c">
        <Gmv class="p-3 borRiu mar-r" :info="ssorder"></Gmv>
        <Gms class="p-3 borRiu mar-l" :info="parentMsg"></Gms>
      </div>
      <TopList class="flex-1 borRiu mar" style="padding: 10px;box-sizing: border-box;"></TopList>
    </div>
    <!-- 弹窗  -->
    <Diloing :showDialog="showDialog" :money="headers" @change="changeModel"></Diloing>


    <!-- 右 -->
    <div class="flex flex-col" style="width: 25%;">
      <TableList></TableList>
    </div>
  </div>
</template>

<script setup>
import TotalData from "./components/TotalData.vue";//中间顶部
import Gmv from "./components/Gmv.vue";//中间左边
import Gms from "./components/Gms.vue";//中间右边
import TopList from './components/TopList.vue' //中间下边
import TableList from "./components/TableList.vue";//右边列表
import LeftBot from "./components/LeftBot.vue";
import Diloing from "./components/Diloing.vue";


import { ref, onMounted,onBeforeUnmount } from "vue";
import { getallList,getzburl } from "./api/api";

const showDialog = ref(false)//这是弹窗开关
const parentMsg = ref({}) //大单
const headers = ref({})//总金额
const ssorder = ref({}) //实时订单
const url = ref('')
let auto = null;




onMounted(() => {
  loadData()
  geturl()
  auto = setInterval(() => {
        loadData()
    }, 10000);
})

const geturl = async () =>{
  let res = await getzburl()
  url.value = res.data.data.url
}


const loadData = async () => {
  let res = await getallList();
  parentMsg.value = {}
  headers.value = {}
  ssorder.value = {}


  parentMsg.value = res.data.data.big
  headers.value = res.data.data.head
  ssorder.value = res.data.data.ss_order
  if (res.data.data.tx == 1) {
      showDialog.value = true
  }
 
};

const changeModel = () => {
  showDialog.value = false;
}


onBeforeUnmount(() => {
    //离开页面清理定时器
    intervalId && clearInterval(auto);
});
</script>

<style lang="scss" scoped>
.alls {
  background-color: #000;
  //min-width: 87.5rem;//

  .none {
    width: 100%;
    height: 100%;
  }
}

* {
  color: white;
}

.center-t {
  height: 30%;
}

.center-c {
  height: 20%;
}

.borRiu {
  border-radius: 0.625rem;
}

.mar {
  margin-top: 0.9375rem;
}

.mar-t {
  margin-bottom: 0.9375rem;
}

.mar-r {
  margin-right: 0.3125rem;
}

.mar-l {
  margin-left: 0.3125rem;
}
</style>
